Learning Functional Programming with JS - Anjana Vakil

What’s functional programming?

• a programming paradigm
• a coding style
• a mindset
• a buzz-wordy trend ( ?

Why functional JavaScript?

• Object - Oriented JS gets tricky, such as prototypes, this…etc
• Safer, easier to maintain
• Established community built lot of libraries

Let’s get started!

Do Everything with Functions

Take Input => Give Output

Thinking about the flow of data through the program, instead of object and how they interact.

  // Not functional, imperative style
    var name = "Boyu";
    var greeting = "Hi, I'm";
    console.log(greeting + name);  // => "Hi, I'm Boyu"

  // Functional
    function greeting(name) {
      return `Hi, I'm ${name}`;
    }

    greeting("Boyu"); // => "Hi, I'm Boyu"

Avoid side effects - Use “pure” functions

Let function to do nothing except take the input, compute the output and return it

• Print to the console is not returning the output
• Avoid to use some global scope variable to compute

  // Not pure
    var name = "Boyu";
    function greet() {
      console.log("Hi, I'm" + name);
    }

  // Pure
    function greeting(name) {
      return `Hi, I'm ${name}`;
    }

Use higher-order functions - Functions can be inputs / outputs

Function can takes as inputs to other functions or be returned as outputs

    function makeAdjectifier(adjective) {
      return function (string) {
        return adjective + ' ' + string
      };
    }

    var coolifier = makeAdjectifier('cool');
    coolifier('conference'); // => 'cool conference'

Don’t iterate - Use map, reduce, filter

Not only get the list, but also get the function that we’re going to apply to.

Avoid mutability - Use immutable data

  // Mutation (Bad!)
    var rooms = ['H1', 'H2', 'H3'];
    rooms[2] = 'H4';
    rooms; // => ['H1', 'H2', 'H4']

  // No mutation (Good!)
    var rooms = ['H1', 'H2', 'H3'];
    var newRooms = rooms.map(function(rm) {
      if (rm === 'H3') { return 'H4'; }
        else { return rm; }
      });
    newRooms; // => ['H1', 'H2', 'H4'] 
    rooms; // => ['H1', 'H2', 'H3']   

Persistent data structures for efficient immutability

• To copy the whole data structure is not efficient
• Structural sharing: share parts of old versions with the new one
• The libraries recommended: Mori, Immutable.js, Ramda, Lodash, Underscore

延伸閱讀

An introduction to functional programming